<template>
  <div class="container">
    <!-- 页面头部 -->
    <!-- <header class="page-header">
      <h1 class="title">第二届网络安全大赛</h1>
      <p class="subtitle">展示你的网络安全技能，与全国顶尖选手同台竞技</p>
    </header> -->

    <div class="main-content">
      <!-- 竞赛信息卡片 -->
      <div class="competition-info-card">
        <div class="icon-container">
          <!-- <i class="fa fa-shield"></i> -->
          <el-icon><Flag /></el-icon>
        </div>
        <h2 class="card-title">竞赛信息</h2>
        <div class="info-item">
          <el-icon class="icon"><Tickets /></el-icon>
          <div class="titleInfo">
            <p class="info-label">简介</p>
            <p class="info-text">
              华中科技大学第一届网络安全挑战赛AWD模式，通过攻防演练提升安全技能
              华中科技大学第一届网络安全挑战赛AWD模式，通过攻防演练提升安全技能
              华中科技大学第一届网络安全挑战赛AWD模式，通过攻防演练提升安全技能
            </p>
          </div>
        </div>
        <!-- 时间、地点等信息项 -->

        <div class="info-item">
          <el-icon><Timer /></el-icon>
          <div class="titleInfo">
            <p class="info-label">竞赛时间</p>
            <p class="info-text">2023-04-01 09:00:00 - 2023-04-02 17:00:00</p>
          </div>
        </div>
        <div class="info-item">
          <el-icon><LocationInformation /></el-icon>
          <div class="titleInfo">
            <p class="info-label">竞赛地点</p>
            <p class="info-text">
              华中科技大学第一届网络安全挑战赛AWD模式，通过攻防演练提升安全技能
            </p>
          </div>
        </div>
        <div class="info-item">
          <el-icon><User /></el-icon>
          <div class="titleInfo">
            <p class="info-label">队伍人数</p>
            <p class="info-text">6人</p>
          </div>
        </div>
      </div>

      <!-- 报名表单 -->
      <div class="registration-form">
        <h2 class="form-title">团队报名信息</h2>
        <li style="color: red; font-size: 14px; margin-bottom: 10px">
          注意：团队成员的邮箱必须是正在使用且能收到验证信息的可使用邮箱，否则将无法完成报名参加竞赛。
        </li>
        <el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
          <!-- 团队基本信息 -->
          <div class="form-section">
            <h3 class="section-title">团队信息</h3>
            <el-form-item label="队伍名称" prop="teamInfo.teamName">
              <el-input
                v-model="form.teamInfo.teamName"
                placeholder="请输入队伍名称"
                @focus="handleFocus"
                @blur="handleBlur"
              />
            </el-form-item>
            <!-- <el-form-item label="队长邮箱" prop="teamInfo.captainEmail">
              <el-input
                v-model="form.teamInfo.captainEmail"
                placeholder="请输入队伍名称"
                @focus="handleFocus"
                @blur="handleBlur"
              />
            </el-form-item> -->
            <el-form-item label="学校" prop="teamInfo.school">
              <el-select
                @focus="handleFocus"
                @blur="handleBlur"
                v-model="form.teamInfo.school"
                placeholder="请选择学校"
              >
                <el-option label="华中科技大学" value="huazhong" />
                <el-option label="武汉大学" value="wuhan" />
              </el-select>
            </el-form-item>
          </div>

          <!-- 队长信息 -->
          <div class="form-section">
            <h3 class="section-title">队长信息</h3>
            <el-row :gutter="20">
              <el-col :span="elcol">
                <el-form-item label="姓名" prop="captain.name">
                  <el-input
                    v-model="form.captain.name"
                    @focus="handleFocus"
                    @blur="handleBlur"
                    placeholder="请输入姓名"
                  />
                </el-form-item>
                <!--年龄 电话 性别 学号 专业  -->
              </el-col>
              <el-col :span="elcol">
                <el-form-item label="年龄" prop="captain.age">
                  <el-input
                    type="number"
                    placeholder="请输入年龄"
                    v-model="form.captain.age"
                    @focus="handleFocus"
                    @blur="handleBlur"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="elcol">
                <el-form-item label="电话" prop="captain.phone">
                  <el-input
                    placeholder="请输入电话"
                    v-model="form.captain.phone"
                    @focus="handleFocus"
                    @blur="handleBlur"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="elcol">
                <el-form-item label="性别" prop="captain.gender">
                  <el-select
                    v-model="form.captain.gender"
                    placeholder="请选择性别"
                    @focus="handleFocus"
                    @blur="handleBlur"
                  >
                    <el-option label="男" value="male" />
                    <el-option label="女" value="female" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="elcol">
                <el-form-item label="学号" prop="captain.studentId">
                  <el-input
                    placeholder="请输入学号"
                    v-model="form.captain.studentId"
                    @focus="handleFocus"
                    @blur="handleBlur"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="elcol">
                <el-form-item label="专业" prop="captain.major">
                  <el-input
                    placeholder="请输入专业"
                    v-model="form.captain.major"
                    @focus="handleFocus"
                    @blur="handleBlur"
                  />
                </el-form-item>
              </el-col>
              <!-- 其他队长信息表单项 -->
            </el-row>
          </div>

          <!-- 队员信息 -->
          <div class="form-section">
            <h3 class="section-title">队员信息</h3>
            <div class="member-controls">
              <!-- <el-button type="text" @click="addMember"
                ><i class="fa fa-plus-circle"></i> 添加队员</el-button
              > -->
              <div
                style="cursor: pointer; color: #409eff"
                class="add-member-btn"
                @click="addMember"
              >
                添加队员
              </div>
            </div>
            <div v-for="(member, index) in form.members" :key="index" class="member-item">
              <div class="member-header">
                <h4>队员 {{ index + 1 }}</h4>
                <el-button style="padding: 5px" type="text" @click="removeMember(index)"
                  ><i class="fa fa-minus-circle"></i> 移除</el-button
                >
              </div>

              <el-row :gutter="20">
                <el-col :span="elcol">
                  <el-form-item :label="'姓名'" :prop="'members.' + index + '.name'">
                    <el-input
                      v-model="member.name"
                      placeholder="请输入姓名"
                      @focus="handleFocus"
                      @blur="handleBlur"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="elcol">
                  <el-form-item :label="'年龄'" :prop="'members.' + index + '.age'">
                    <el-input
                      v-model="member.age"
                      type="number"
                      placeholder="请输入年龄"
                      @focus="handleFocus"
                      @blur="handleBlur"
                    />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="elcol">
                  <el-form-item :label="'电话'" :prop="'members.' + index + '.phone'">
                    <el-input
                      v-model="member.phone"
                      placeholder="请输入电话"
                      @focus="handleFocus"
                      @blur="handleBlur"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="elcol">
                  <el-form-item :label="'性别'" :prop="'members.' + index + '.gender'">
                    <el-select
                      v-model="member.gender"
                      placeholder="请选择性别"
                      @focus="handleFocus"
                      @blur="handleBlur"
                    >
                      <el-option label="男" value="male"></el-option>
                      <el-option label="女" value="female"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="elcol">
                  <el-form-item :label="'学号'" :prop="'members.' + index + '.studentId'">
                    <el-input
                      v-model="member.studentId"
                      placeholder="请输入学号"
                      @focus="handleFocus"
                      @blur="handleBlur"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="elcol">
                  <el-form-item :label="'专业'" :prop="'members.' + index + '.major'">
                    <el-input
                      v-model="member.major"
                      placeholder="请输入专业"
                      @focus="handleFocus"
                      @blur="handleBlur"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>

          <!-- 提交按钮 -->
          <el-form-item class="submit-btn-container">
            <el-button
              type="primary"
              style="display: flex; align-items: center; justify-content: center"
              :loading="loading"
              @click="submitForm"
            >
              <div
                style="display: flex; align-items: center; justify-content: center"
                class="fa fa-paper-plane"
              ></div>
              提交报名
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 页脚 -->
    <footer class="page-footer">
      <p>© 2025 网络安全大赛组委会 | 技术支持：华中科技大学网安学院</p>
    </footer>
  </div>
</template>

<script setup>
import { ref, reactive, onUnmounted, watchEffect } from "vue";
import { ElForm, ElInput, ElSelect, ElButton, ElMessage } from "element-plus";

const formRef = ref();
const loading = ref(false);
const screenWidth = ref(window.innerWidth);
const elcol = ref(12); // 初始值，假设桌面端为12列

//通过watch监听当前屏幕宽度，当宽度小于768时，来动态改变表单的宽度
// 监听屏幕宽度变化并更新列宽
watchEffect(() => {
  if (screenWidth.value < 768) {
    elcol.value = 24; // 移动端单列
  } else {
    elcol.value = 12; // 桌面端双列
  }
});

const handleResize = () => {
  screenWidth.value = window.innerWidth;
};
window.addEventListener("resize", handleResize);

onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
});

const form = ref({
  teamInfo: {
    teamName: "",
    school: "",
    captainEmail: "",
  },
  captain: {
    name: "",
    age: "",
    phone: "",
    gender: "",
    studentId: "",
    major: "",
  },
  members: Array(1)
    .fill()
    .map(() => ({
      name: "",
      age: "",
      phone: "",
      gender: "",
      studentId: "",
      major: "",
    })),
});

const rules = ref({
  teamInfo: {
    teamName: [
      { required: true, message: "请输入队伍名称", trigger: "blur" },
      { min: 2, max: 20, message: "队伍名称长度在2-20个字符之间", trigger: "blur" },
    ],
    school: [{ required: true, message: "请选择所属院校", trigger: "change" }],
    captainEmail: [
      { required: true, message: "请输入队长邮箱", trigger: "blur" },
      { type: "email", message: "请输入正确的邮箱格式", trigger: ["blur", "change"] },
    ],
  },

  captain: {
    name: [{ required: true, message: "请输入队长姓名", trigger: "blur" }],
    age: [{ required: true, message: "请输入队长年龄", trigger: "blur" }],
    phone: [
      { required: true, message: "请输入队长电话", trigger: "blur" },
      { pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号码", trigger: "blur" },
    ],
    gender: [{ required: true, message: "请选择队长性别", trigger: "change" }],
    studentId: [{ required: true, message: "请输入队长学号", trigger: "blur" }],
    major: [{ required: true, message: "请输入队长专业", trigger: "blur" }],
  },
  members: Array(6)
    .fill()
    .map(() => ({
      name: [{ required: true, message: "请输入队员姓名", trigger: "blur" }],
      age: [{ required: true, message: "请输入队员年龄", trigger: "blur" }],
      phone: [
        { required: true, message: "请输入队员电话", trigger: "blur" },
        { pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号码", trigger: "blur" },
      ],
      gender: [{ required: true, message: "请选择队员性别", trigger: "change" }],
      studentId: [{ required: true, message: "请输入队员学号", trigger: "blur" }],
      major: [{ required: true, message: "请输入队员专业", trigger: "blur" }],
    })),
});

const handleFocus = (e) => {
  e.target.parentElement.classList.add("input-focus");
};

const handleBlur = (e) => {
  e.target.parentElement.classList.remove("input-focus");
};

const addMember = () => {
  if (form.value.members.length < 6) {
    form.value.members.push({
      name: "",
      age: "",
      phone: "",
      gender: "",
      studentId: "",
      major: "",
    });
  } else {
    ElMessage.warning("最多只能添加6名队员");
  }
};

const removeMember = (index) => {
  if (form.value.members.length > 1) {
    form.value.members.splice(index, 1);
  } else {
    ElMessage.warning("至少需要保留1名队员");
  }
};

const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      loading.value = true;
      setTimeout(() => {
        loading.value = false;
        ElMessage.success("报名提交成功！我们将尽快审核您的信息");
        console.log(form.value, "报名");
        // formRef.value.resetFields();
      }, 1000);
    } else {
      ElMessage.error("请完善报名信息");
      return false;
    }
  });
};
</script>

<style lang="scss" scoped>
.container {
  max-width: 1980px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.title {
  font-size: 2.5rem;
  background: linear-gradient(to right, #165dff, #36d399);
  -webkit-background-clip: text;
  color: transparent;
  margin-bottom: 15px;
}

.subtitle {
  color: #6b7280;
  max-width: 600px;
  margin: 0 auto;
}

.main-content {
  display: grid;
  gap: 30px;
  margin-top: 20px;
}

@media (min-width: 1024px) {
  .main-content {
    grid-template-columns: 1fr 2fr;
  }
}

/* 竞赛信息卡片 */
.competition-info-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 25px;
  min-height: 400px;
}

.icon-container {
  width: 60px;
  height: 60px;
  background: #e7f0ff;
  border-radius: 50%;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #165dff;
}

.card-title {
  text-align: center;
  margin-bottom: 25px;
  font-size: 1.25rem;
  font-weight: 600;
}

.info-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
  margin-bottom: 40px;
  .icon {
    width: 36px;
    height: 36px;
  }
  .titleInfo {
    flex: 1;
  }
}

.info-item i {
  width: 36px;
  height: 36px;
  background: #e7f0ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #165dff;
  margin-right: 12px;
}

.info-label {
  font-weight: 500;
  /* color: #6b7280; */
  color: black;
  margin-bottom: 5px;
}
.info-text {
  color: #6b7280;
  font-size: 14px;
  margin-bottom: 5px;
}
/* 报名表单 */
.registration-form {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 30px;
}

.form-title {
  font-size: 1.75rem;
  margin-bottom: 15px;
}

.form-section {
  background: #f9fafb;
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 25px;
}

.section-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 18px;
}

.el-row {
  // margin-bottom: 15px;
}

.el-input,
.el-select {
  width: 100%;
  transition: all 0.3s ease;
}

.el-input:focus,
.el-select:focus {
  box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.2);
  outline: none;
}

.input-focus {
  transform: scale(1.01);
  box-shadow: 0 4px 12px rgba(22, 93, 255, 0.1);
}

.member-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.member-item {
  padding-left: 18px;
  border-left: 4px solid #e7f0ff;
  margin-bottom: 25px;
}

.member-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.submit-btn-container {
  text-align: center;
  display: flex;
  align-items: center;
}

.el-button {
  padding: 12px 30px;
  font-size: 1rem;
  font-weight: 500;
}

.el-button--primary {
  background: linear-gradient(to right, #165dff, #36d399);
  border: none;
  box-shadow: 0 4px 12px rgba(22, 93, 255, 0.2);
}

.el-button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(22, 93, 255, 0.3);
}

/* 响应式布局 */
@media (max-width: 768px) {
  .main-content {
    grid-template-columns: 1fr;
    margin-top: 30px;
  }

  .el-col {
    width: 100% !important;
    // margin-bottom: 15px;
  }
}
.page-footer {
  margin-top: 50px;
  text-align: center;
  color: #6b7280;
  font-size: 15px;
}

// 媒体查询：移动端样式（屏幕宽度 ≤ 768px）
/* 移动端适配（屏幕宽度 ≤ 768px） */
@media (max-width: 768px) {
  .main-content {
    grid-template-columns: 1fr;
  }
  .container {
    padding: 12px;
  }
  /* 确保在移动端每个表单元素单独占一行 */
  .registration-form .el-row {
    display: flex;
    flex-direction: column;
  }

  .registration-form .el-col {
    width: 100% !important;
    // margin-bottom: 15px;
  }
  .el-row {
    margin-bottom: 0px;
  }
  .el-col {
    width: 200px !important;
    // margin-bottom: 10px;
  }
  .form-title {
    font-size: 16px;
  }
  .section-title {
    font-size: 14px;
  }
  .member-header {
    font-size: 14px;
  }
  .add-member-btn {
    font-size: 14px;
  }
  .card-title {
    font-size: 18px;
  }
  .el-input,
  .el-select {
    font-size: 16px;
    height: 44px;
  }
  :deep(.el-select__wrapper) {
    height: 44px;
  }
  :deep(.el-input__inner) {
    font-size: 14px;
  }
  :deep(.el-form-item__content) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .el-button {
    padding: 10px 20px;
  }
  .competition-info-card,
  .registration-form {
    padding: 20px;
  }
  .form-section {
    padding: 15px;
  }
  .el-button {
    font-size: 14px;
  }
  :deep(.el-form-item__content) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .submit-btn-container {
    margin-top: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .member-item {
    padding-left: 12px;
    border-left-width: 3px;
  }
  .member-header {
    margin-bottom: 10px;
  }
  /* 调整表单标签宽度，使其在移动端更紧凑 */
  .el-form-item__label {
    width: auto !important;
    padding-right: 10px;
  }
}
</style>
